<template>
  <div class="space-y-6">
    <div class="card">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h3 class="font-semibold text-lg">页面列表</h3>
        <button class="btn btn-primary" @click="createPage">
          <i class="fa fa-plus"></i>
          <span>创建新页面</span>
        </button>
      </div>
      
      <div class="p-6 border-b border-gray-100">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">所属站点</label>
            <select class="form-input" v-model="filters.siteId" @change="loadPages">
              <option value="">请选择站点</option>
              <option v-for="site in sites" :key="site.id" :value="site.id">{{ site.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">页面类型</label>
            <select class="form-input" v-model="filters.type">
              <option value="">全部类型</option>
              <option value="index">首页</option>
              <option value="list">列表页</option>
              <option value="detail">详情页</option>
              <option value="contact">联系页</option>
              <option value="custom">自定义页</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">页面状态</label>
            <select class="form-input" v-model="filters.status">
              <option value="">全部状态</option>
              <option value="published">已发布</option>
              <option value="draft">草稿</option>
              <option value="modified">已修改未发布</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="bg-gray-50">
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">页面名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">页面路径</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">页面类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后修改时间</th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="page in filteredPages" :key="page.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">{{ page.name }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ page.path }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge bg-gray-100 text-gray-600">{{ page.typeText }}</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge" :class="page.status === 'published' ? 'bg-success/10 text-success' : page.status === 'draft' ? 'bg-gray-100 text-gray-600' : 'bg-warning/10 text-warning'">
                  {{ page.statusText }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ page.lastModified }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex justify-end gap-2">
                  <button class="text-primary hover:text-primary/80" title="编辑" @click="editPage(page.id)">
                    <i class="fa fa-pencil"></i>
                  </button>
                  <button class="text-gray-500 hover:text-gray-700" title="预览" @click="previewPage(page.id)">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button class="text-success hover:text-success/80" title="发布" v-if="page.status !== 'published'">
                    <i class="fa fa-check"></i>
                  </button>
                  <button class="text-danger hover:text-danger/80" title="删除" @click="deletePage(page.id)">
                    <i class="fa fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
            <tr v-if="filteredPages.length === 0">
              <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                请先选择站点查看页面列表
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 站点列表
const sites = ref([
  { id: 1, name: '时尚服装商城' },
  { id: 2, name: '科技有限公司官网' },
  { id: 3, name: '教育培训平台' }
])

// 页面数据
const pages = ref([])

// 筛选条件
const filters = reactive({
  siteId: '',
  type: '',
  status: ''
})

// 筛选后的页面
const filteredPages = computed(() => {
  return pages.value.filter(page => {
    const matchesType = !filters.type || page.type === filters.type
    const matchesStatus = !filters.status || page.status === filters.status
    return matchesType && matchesStatus
  })
})

// 加载页面数据
const loadPages = () => {
  if (!filters.siteId) {
    pages.value = []
    return
  }
  
  // 根据选择的站点加载不同的页面数据
  if (filters.siteId == 1) {
    pages.value = [
      { id: 1, siteId: 1, name: '首页', path: '/', type: 'home', typeText: '首页', status: 'published', statusText: '已发布', lastModified: '2023-06-10 15:30' },
      { id: 2, siteId: 1, name: '商品列表', path: '/products', type: 'list', typeText: '列表页', status: 'published', statusText: '已发布', lastModified: '2023-06-08 10:15' },
      { id: 3, siteId: 1, name: '商品详情', path: '/product/:id', type: 'detail', typeText: '详情页', status: 'published', statusText: '已发布', lastModified: '2023-06-05 09:45' },
      { id: 4, siteId: 1, name: '关于我们', path: '/about', type: 'custom', typeText: '自定义页', status: 'draft', statusText: '草稿', lastModified: '2023-06-12 14:20' }
    ]
  } else if (filters.siteId == 2) {
    pages.value = [
      { id: 5, siteId: 2, name: '首页', path: '/', type: 'home', typeText: '首页', status: 'published', statusText: '已发布', lastModified: '2023-05-28 16:40' },
      { id: 6, siteId: 2, name: '产品中心', path: '/products', type: 'list', typeText: '列表页', status: 'modified', statusText: '已修改未发布', lastModified: '2023-06-12 11:30' },
      { id: 7, siteId: 2, name: '联系我们', path: '/contact', type: 'contact', typeText: '联系页', status: 'published', statusText: '已发布', lastModified: '2023-05-30 13:25' }
    ]
  } else if (filters.siteId == 3) {
    pages.value = [
      { id: 8, siteId: 3, name: '首页', path: '/', type: 'home', typeText: '首页', status: 'draft', statusText: '草稿', lastModified: '2023-06-11 10:05' },
      { id: 9, siteId: 3, name: '课程列表', path: '/courses', type: 'list', typeText: '列表页', status: 'draft', statusText: '草稿', lastModified: '2023-06-10 16:20' }
    ]
  }
}

// 创建新页面
const createPage = () => {
  if (!filters.siteId) {
    alert('请先选择一个站点')
    return
  }
  router.push('/visual-editor?siteId=' + filters.siteId)
}

// 编辑页面
const editPage = (id) => {
  const page = pages.value.find(p => p.id === id)
  if (page) {
    router.push(`/visual-editor?siteId=${page.siteId}&pageId=${id}`)
  }
}

// 预览页面
const previewPage = (id) => {
  const page = pages.value.find(p => p.id === id)
  if (page) {
    alert(`预览页面: ${page.name}`)
    // 实际项目中应该打开新窗口预览页面
  }
}

// 删除页面
const deletePage = (id) => {
  if (confirm('确定要删除这个页面吗？此操作不可恢复。')) {
    const index = pages.value.findIndex(p => p.id === id)
    if (index !== -1) {
      pages.value.splice(index, 1)
    }
  }
}
</script>

<style scoped>
</style>
